<template>
	<div>
		<table border="1px" class="tale" style="width:93.5%;position:relative;left:4%">
			<tr align="center" class="tale_title">
				<th>
					<label class="myLabel">姓名</label>
				</th>
				<th>
					<label class="myLabel">已有的一级4A主账号</label>
				</th>
				<th>
					<label>联系方式</label>
				</th>
				<th>
					<label>工作职责</label>
				</th>
				<th>
					<label>组织名称</label>
				</th>
				<!--                     <th>组名称(项目组/部门名称)</th> -->
				<td v-if="!print">
					<Button v-if="!ifedit" type="primary" size="small" @click="addRow">新增</Button>
				</td>
			</tr>
			<template v-for="(item, index) in people">
				<tr align="center" style="height:50px" :key="index">
					<td style="width:14%">
						<span v-if="ifedit">{{people[index].peopleName}}</span>
						<component v-else ref="inputSearch"  :dataList="peopleList"  :checkLable="people[index].peopleUserId" :is="'inputSearch'"
						  :multiple="false" @on-change="changePeople($event,index)" style="width:90%"></component>
					</td>
					<td>
						<!--                         <Form ref="people[index]" :model="people[index]" label-position="left" :label-width="0">
                      <FormItem> -->
						<span v-if="ifedit">{{people[index].fourA}}</span>
						<Input v-else style="width: 90%;" v-model="people[index].fourA" placeholder="请填写已有的4A账号"></Input>
						<!--                         </FormItem>
                      </Form> -->
					</td>
					<td>
						<span v-if="ifedit">{{people[index].phone}}</span>
						<Input v-else style="width: 90%;" v-model="people[index].phone" placeholder="请填写联系方式" maxlength="30"></Input>
					</td>
					<td>
						<span v-if="ifedit">{{people[index].duty}}</span>
						<Select v-else style="width:90%" v-model="people[index].duty" :transfer="true" filterable allow-create @on-create="createDuty"
						 placeholder="请选择工作职责">
							<Option v-for="item in dutyList" :value="item.value" :key="item.value">{{ item.label }}</Option>
						</Select>
					</td>
					<td>
						<template v-if="ifedit">
							<span>{{people[index].outterCompany}}</span>
						</template>
						<template v-else-if="( (!ifedit) && (people[index].companyList!=undefined && people[index].companyList!=null) )">
							<Input v-if="(people[index].companyList.length==0)" style="width: 90%;" v-model="people[index].outterCompany"
							 placeholder="请填写所属组织"></Input>
							<Select v-else style="width:90%" v-model="people[index].outterCompany" :transfer="true" filterable
							 :label-in-value='true' placeholder="请选择所属组织">
								<Option v-for="item in people[index].companyList" :value="item.gName" :key="item.gName">{{ item.gName }}</Option>
							</Select>
						</template>
						<template v-else>
							<Input style="width: 90%;" v-model="people[index].outterCompany"></Input>
						</template>
					</td>
					<td v-if="!print" style="width:18%">
						<Button v-if="!ifedit" type="warning" size="small" @click="removeRow(index)">删除</Button>
						<Button type="primary" size="small" @click="expandRow(index)">{{(item.isExpand < 0)?'展开':'收起'}}</Button>
						<Button v-if="!ifedit" type="primary" size="small" @click="copyRow(index)">复制</Button>
					</td>
					</Form>
				</tr>
				<tr v-show="item.isExpand >= 0 || print">
					<td colspan="6">
						<Form ref="people[index]" :model="people[index]" label-position="left" :label-width="120" style="position:relative;left:4%;padding:1%;">
							<Divider style="right:4%">申请账号和相关权限</Divider>
							<Row>
								<Col span="12">
								<FormItem :required="true">
									<template slot="label">
										<span>帐号使用期限：</span>
										<Tooltip content="默认申请期限不超过1年" max-width="200" placement="right" :transfer="true" style="white-space: normal;">
											<Icon type="md-help-circle" />
										</Tooltip>
									</template>
									<Input v-if="ifedit" style="width: 90%;" v-model="people[index].date" :readonly="true"></Input>
									<DatePicker v-else v-model="people[index].date" type="date" placeholder="请选择账号使用期限" format="yyyy-MM-dd" style="width:80%"
									 @on-change="dateFormat(index,$event)" :options="options" :disabled="ifedit" :clearable="false"></DatePicker>
								</FormItem>
								</Col>
								<Col span="12">
								<FormItem label="已有账号名：">
									<Input v-model="people[index].exAccount" style="width:80%" :readonly="ifedit" />
								</FormItem>
								</Col>
							</Row>
							<Row>
								<Col>
								<FormItem label="账号类型：">
									<Col v-if="ifedit?people[index].isSever:true">
									<Checkbox v-model="people[index].isSever" @on-change="changeSever(index)" :disabled="ifedit">
										<span>主机账号</span>
									</Checkbox>
									<table border="1px" class="tale" style="position:relative;left:2%;width:90%" v-if="people[index].isSever">
										<tr align="center" class="tale_title">
											<th>
												<label class="myLabel">账号属性</label>
											</th>
											<th>
												<label class="myLabel">设备IP地址</label>
											</th>
											<th>
												<label>设备名称</label>
											</th>
											<th>
												<label>组读和执行权限目录</label>
											</th>
											<th>
												<label>该用户组需写权限目录</label>
											</th>
											<td v-if="!ifedit">
												<Button type="primary" size="small" @click="addServer(index)" :disabled="ifedit">新增</Button>
											</td>
										</tr>
										<template v-for="(ser, ser_index) in people[index].severs">
											<tr align="center" style="height:50px">
												<td style="width:10vw">
													<span v-if="ifedit">{{people[index].severs[ser_index].accountAttr}}</span>
													<Select v-else v-model="people[index].severs[ser_index].accountAttr" style="width:90%">
														<Option v-for="item in attrList" :value="item.value" :key="item.value">{{ item.label }}</Option>
													</Select>
												</td>
												<td>
													<span v-if="ifedit">{{people[index].severs[ser_index].ip}}</span>
													<Input v-else style="width: 90%;" v-model="people[index].severs[ser_index].ip"></Input>
												</td>
												<td>
													<span v-if="ifedit">{{people[index].severs[ser_index].sname}}</span>
													<Input v-else style="width:90%;" v-model="people[index].severs[ser_index].sname"></Input>
												</td>
												<td>
													<span v-if="ifedit">{{people[index].severs[ser_index].rxPath}}</span>
													<Input v-else style="width: 90%;" v-model="people[index].severs[ser_index].rxPath"></Input>
												</td>
												<td>
													<span v-if="ifedit">{{people[index].severs[ser_index].wpath}}</span>
													<Input v-else style="width: 90%;" v-model="people[index].severs[ser_index].wpath"></Input>
												</td>
												<td style="width:10%" v-if="!ifedit">
													<Button type="warning" size="small" @click="removeServer(index,ser_index)" :disabled="ifedit">删除</Button>
												</td>
											</tr>
										</template>
									</table>
									</Col>
									<Col v-if="ifedit?people[index].isDb:true">
									<Checkbox v-model="people[index].isDb" @on-change="changeDb(index)" :disabled="ifedit">
										<span>数据库账号</span>
									</Checkbox>
									<table border="1px" class="tale" style="position:relative;left:2%;width:90%" v-if="people[index].isDb">
										<tr align="center" class="tale_title">
											<th>
												<label class="myLabel">账号属性</label>
											</th>
											<th>
												<label class="myLabel">设备IP地址</label>
											</th>
											<th>
												<label>设备名称</label>
											</th>
											<th>
												<label class="myLabel">库名</label>
											</th>
											<th>
												<label class="myLabel">表名</label>
											</th>
											<th>
												<label class="myLabel">权限</label>
											</th>
											<td v-if="!ifedit">
												<Button type="primary" size="small" @click="addDB(index)" :disabled="ifedit">新增</Button>
											</td>
										</tr>
										<template v-for="(db, db_index) in people[index].dbs">
											<tr align="center" style="height:50px">
												<td style="width:10vw">
													<span v-if="ifedit">{{people[index].dbs[db_index].accountAttr}}</span>
													<Select v-else v-model="people[index].dbs[db_index].accountAttr" style="width:90%">
														<Option v-for="item in attrList" :value="item.value" :key="item.value">{{ item.label }}</Option>
													</Select>
												</td>
												<td>
													<span v-if="ifedit">{{people[index].dbs[db_index].ip}}</span>
													<Input v-else style="width: 90%;" v-model="people[index].dbs[db_index].ip"></Input>
												</td>
												<td>
													<span v-if="ifedit">{{people[index].dbs[db_index].sname}}</span>
													<Input v-else style="width:90%;" v-model="people[index].dbs[db_index].sname"></Input>
												</td>
												<td>
													<span v-if="ifedit">{{people[index].dbs[db_index].dbName}}</span>
													<Input v-else style="width: 90%;" v-model="people[index].dbs[db_index].dbName"></Input>
												</td>
												<td>
													<span v-if="ifedit">{{people[index].dbs[db_index].tableName}}</span>
													<Input v-else style="width: 90%;" v-model="people[index].dbs[db_index].tableName"></Input>
												</td>
												<td>
													<span v-if="ifedit">{{people[index].dbs[db_index].auth}}</span>
													<Input v-else style="width: 90%;" v-model="people[index].dbs[db_index].auth"></Input>
												</td>
												<td style="width:10%" v-if="!ifedit">
													<Button type="warning" size="small" @click="removeDB(index,db_index)" :disabled="ifedit">删除</Button>
												</td>
											</tr>
										</template>
									</table>
									</Col>
									<Col v-if="ifedit?people[index].isHadoop:true">
									<Checkbox v-model="people[index].isHadoop" @on-change="changeHadoop(index)" :disabled="ifedit">
										<span>Hadoop账号</span>
									</Checkbox>
									<table border="1px" class="tale" style="position:relative;left:2%;width:90%" v-if="people[index].isHadoop">
										<tr align="center" class="tale_title">
											<th>
												<label class="myLabel">keytab描述</label>
											</th>
											<th>
												<label class="myLabel">Hadoop组件</label>
											</th>
											<th>
												<label class="myLabel">具体权限描述</label>
											</th>
											<td v-if="!ifedit">
												<Button type="primary" size="small" @click="addHadoop(index)" :disabled="ifedit">新增</Button>
											</td>
										</tr>
										<template v-for="(hadoop, ha_index) in people[index].hadoops">
											<tr align="center" style="height:50px">
												<td style="width:10vw">
													<span v-if="ifedit">{{people[index].hadoops[ha_index].keytab}}</span>
													<Input v-else style="width:90%;" v-model="people[index].hadoops[ha_index].keytab"></Input>
												</td>
												<td style="width:10vw">
													<span v-if="ifedit">{{people[index].hadoops[ha_index].hadoopAccountType}}</span>
													<Select v-else filterable v-model="people[index].hadoops[ha_index].hadoopAccountType" style="width:90%">
														<Option v-for="item in hadoopList" :value="item.value" :key="item.value">{{ item.label }}</Option>
													</Select>
												</td>
												<td>
													<span v-if="ifedit">{{people[index].hadoops[ha_index].auth}}</span>
													<Input v-else style="width: 90%;" v-model="people[index].hadoops[ha_index].auth"></Input>
												</td>
												<td style="width:10%" v-if="!ifedit">
													<Button type="warning" size="small" @click="removeHadoop(index,ha_index)" :disabled="ifedit">删除</Button>
												</td>
											</tr>
										</template>
									</table>
									</Col>
									<Col v-if="ifedit?people[index].isHftp:true">
									<Checkbox v-model="people[index].isHftp" @on-change="changeUap(index)" :disabled="ifedit">
										<span>UAP账号</span>
									</Checkbox>
									<template v-if="people[index].isHftp">
										<Row>
											<Col style="left:2%">
											<label class="myLabel">场景说明：</label>
											</Col>
											<Col style="left:2%">
											<Checkbox v-model="people[index].hftps[0].isCluster" :disabled="ifedit">
												<span>采集交换集群与租户集群数据流转</span>
											</Checkbox>
											</Col>
											<Col style="left:2%">
											<Checkbox v-model="people[index].hftps[0].isPerson" :disabled="ifedit">
												<span>采集交换集群与租户个人FTP数据流转</span>
											</Checkbox>
											</Col>
											<Col style="left:2%">
											<Checkbox v-model="people[index].hftps[0].isPro" :disabled="ifedit">
												<span>采集交换集群与生产集群（如Hadoop三期二生产集群）数据流转</span>
											</Checkbox>
											</Col>
										</Row>
									</template>
									</Col>
									<Col v-if="ifedit?people[index].isPaas:true">
									<Checkbox v-model="people[index].isPaas" @on-change="changePaas(index)" :disabled="ifedit">
										<span>PaaS门户账号</span>
									</Checkbox>
									<template v-if="people[index].isPaas">
										<Row style="left:2%">
											<Col span="11">
											<FormItem label="账号类型：" :label-width="120" :required="true">
												<Select v-model="people[index].paas[0].paasType" style="width:43%" :disabled="ifedit">
													<Option v-for="item in paasList" :value="item.value" :key="item.value">{{ item.label }}</Option>
												</Select>
											</FormItem>
											</Col>
										</Row>
									</template>
									</Col>
									<Col v-if="ifedit?people[index].isDacp:true">
									<Checkbox v-model="people[index].isDacp" @on-change="changeDacp(index)" :disabled="ifedit">
										<span>DACP账号</span>
									</Checkbox>
									<template v-if="people[index].isDacp">
										<Row style="left:2%">
											<Col span="11">
											<FormItem label="账号类型：" :label-width="120" :required="true">
												<Select v-model="people[index].dacps[0].dacpAccoutType" style="width:43%" :disabled="ifedit">
													<Option v-for="item in dacpList" :value="item.value" :key="item.value">{{ item.label }}</Option>
												</Select>
											</FormItem>
											</Col>
										</Row>
									</template>
									</Col>
									<Col v-if="ifedit?people[index].isElse:true">
									<Checkbox v-model="people[index].isElse" @on-change="changeElse(index)" :disabled="ifedit">
										<span>其他权限内容</span>
									</Checkbox>
									<template v-if="people[index].isElse">
										<label class="myLabel"></label>
										<Input v-model="people[index].elseAuthes[0].des" size="small" style="width:40%;padding-top: 5px" :readonly="ifedit" type="textarea" :autosize="true"/>
									</template>
									</Col>
								</FormItem>
								</Col>
							</Row>
						</Form>
					</td>
				</tr>
			</template>
		</table>
	</div>
</template>

<script>
	import ajax from "../../../ajax_util"
	import inputSearch from '../../../base/input_search.vue'
	export default {
		name: "account_utils",
		components: {
			inputSearch
		},
		data() {
			return {
				options: {
					disabledDate(date) {
						var now = Date.now();
						var temp = new Date(now);
						var nextYear = temp.getFullYear() + 1;
						var month = temp.getMonth() + 1;
						var day = temp.getDate();
						var t = nextYear + "-" + month + "-" + day;
						var endTime = new Date(t).valueOf()
						return date && (date.valueOf() < Date.now() - 86400000 || date.valueOf() > endTime);
					}
				},
				attrList: [{
						value: "个人实名制账号",
						label: "个人实名制账号"
					},
					{
						value: "程序内置账号",
						label: "程序内置账号"
					},
					{
						value: "超级用户账号",
						label: "超级用户账号"
					},
					{
						value: "FTP账号",
						label: "FTP账号"
					},
					{
						value: "前台账号",
						label: "前台账号"
					}
				],
				paasList: [{
						value: "paas_huawei",
						label: "华为PaaS"
					},
					{
						value: "paas_asia",
						label: "亚信PaaS"
					}
				],
				dacpList: [{
						value: "平台管理",
						label: "平台管理"
					},
					{
						value: "开发管理",
						label: "开发管理"
					},
					{
						value: "数据开发",
						label: "数据开发"
					}
				],
				hadoopList: [{
						value: "HDFS",
						label: "HDFS"
					},
					{
						value: "Hive",
						label: "Hive"
					},
					{
						value: "HBase",
						label: "HBase"
					},
					{
						value: "Kafka",
						label: "Kafka"
					},
					{
						value: "Flume",
						label: "Flume"
					},
					{
						value: "UDF",
						label: "UDF"
					},
					{
						value: "HFTP",
						label: "HFTP"
					},
					{
						value: "其他",
						label: "其他"
					}
				],
			}
		},
		computed: {
			people: {
				get: function() {
					return this.value;
				},
				set: function(value) {
					this.$emit('input', value);
				}
			},
		},
		methods: {
			addRow() {
				this.people.push({
					isExpand: 0,
					date: "",
					isSever: false,
					isDb: false,
					isHadoop: false,
					isHftp: false,
					isPaas: false,
					isDacp: false,
					isElse: false,
					companyList: [],

          baseId: 0,
          commons: [{
            accountType: 0,
            deadline: 0,
            des: "",
            id: 0,
            json: "",
            peopleId: 0,
            status: 0,
            subAccount: ""
          }],
          dacps: [],
          dbs: [],
          deadline: 0,
          duty: "",
          elseAuthes: [],
          exAccount: "",
          fourA: "",
          hadoops: [],
          hftps: [],
          id: 0,
          igroup: "",
          outterCompany: "",
          outterCompanyId: 0,
          paas: [],
          peopleName: "",
          peopleType: 0,
          peopleUserId: 0,
          phone: "",
          severs: [],
          tenantName: ""
        });
        this.getNextYear(this.people.length - 1);
      },
      getNextYear(index) {
        var now = Date.now();
        var temp = new Date(now);
        var nextYear = temp.getFullYear() + 1;
        var month = temp.getMonth() + 1;
        var day = temp.getDate();
        var date = nextYear + "-" + month + "-" + day;
        this.people[index].date = date;
        this.dateFormat(index, date);
      },
      dateFormat(index, event) {
        this.people[index].date = event;
        var date = new Date(this.people[index].date);
        this.people[index].deadline = (date.getTime() / 1000);
      },
      changePeople(list, index) {
        //console.log("00000000");
        console.log("----changePeople---------", list);
        console.log("========", !this.ifedit);
        if (!this.ifedit) {
          //console.log("----changePeople---------",list,index,typeof(list[0].id));
          this.people[index].companyList = [];
          if (list[0] != undefined) {
            if ((list[0].id > 0) && (typeof(list[0].id) === "number")) {
              this.people[index].peopleUserId = list[0].id;
              this.people[index].peopleName = list[0].user_name;
              //this.people[index].fourA = list[0].fourA;
              //this.people[index].phone = list[0].phone;
              var that = this;
              var url = this.CONFIG.url_know + '/getCom-FourA/' + this.people[index].peopleUserId;
              ajax.get({
                that: that,
                url: url,
                success: function(data) {
                  console.log("----data--------", data);
                  that.people[index].companyList = data.structs;
                  that.people[index].fourA = data.fourA;
                  that.people[index].phone = data.phone;
                }
              })
            } else {
              this.people[index].fourA = "";
              this.people[index].phone = "";
              this.people[index].outterCompany = "";
              this.people[index].peopleUserId = 0;
              this.people[index].peopleName = list[0].user_name;
              //console.log("----peopleUserId---------",this.people);
            }
          };
        }
      },
      createDuty(val) {
        this.dutyList.push({
          value: val,
          label: val
        });
      },
      removeRow(index) {
        this.people.splice(index, 1);
      },
      expandRow(index) {
        if (this.people[index].isExpand < 0) {
          this.people[index].isExpand = 0;
        } else {
          this.people[index].isExpand = -1;
        }
      },
      copyRow(index) {
        var temp = JSON.stringify(this.people[index]);
        var people = JSON.parse(temp);
        //console.log("!!!!!!!!",people);

        this.people.push({
          isExpand: 0,
          date: people.date,
          isSever: people.isSever,
          isDb: people.isDb,
          isHadoop: people.isHadoop,
          isHftp: people.isHftp,
          isPaas: people.isPaas,
          isDacp: people.isDacp,
          isElse: people.isElse,
          companyList: [],

          baseId: 0,
          commons: [{
            accountType: 0,
            deadline: 0,
            des: "",
            id: 0,
            json: "",
            peopleId: 0,
            status: 0,
            subAccount: ""
          }],
          dacps: people.dacps,
          dbs: people.dbs,
          deadline: people.deadline,
          duty: "",
          elseAuthes: people.elseAuthes,
          exAccount: people.exAccount,
          fourA: "",
          hadoops: people.hadoops,
          hftps: people.hftps,
          id: 0,
          igroup: "",
          outterCompany: "",
          outterCompanyId: 0,
          paas: people.paas,
          peopleName: "",
          peopleType: 0,
          peopleUserId: 0,
          phone: "",
          severs: people.severs,
          tenantName: ""
        });
        console.log("==========", this.people[this.people.length - 1]);
      },
      addServer(index) {
        this.people[index].severs.push({
          accountAttr: "",
          deadline: 0,
          id: 0,
          ip: "",
          peopleId: 0,
          rxPath: "",
          sname: "",
          status: 0,
          subAccount: "",
          wpath: ""
        });
      },
      removeServer(index, ser_index) {
        this.people[index].severs.splice(ser_index, 1);
      },
      addDB(index) {
        this.people[index].dbs.push({
          accountAttr: "",
          auth: "",
          dbName: "",
          deadline: 0,
          id: 0,
          ip: "",
          peopleId: 0,
          sname: "",
          status: 0,
          subAccount: "",
          tableName: ""
        });
      },
      removeDB(index, db_index) {
        this.people[index].dbs.splice(db_index, 1);
      },
      addHadoop(index) {
        this.people[index].hadoops.push({
          hadoopAccountType: "",
          auth: "",
          cpu: 10,
          deadline: 0,
          hdfs: "100G",
          keytab: "",
          id: 0,
          mem: 40,
          peopleId: 0,
          status: 0,
          subAccount: ""
        });
      },
      removeHadoop(index, ha_index) {
        this.people[index].hadoops.splice(ha_index, 1);
      },
      changeSever(index) {
        this.people[index].severs = [];
        if (this.people[index].isSever) {
          this.people[index].severs.push({
            accountAttr: "",
            deadline: 0,
            id: 0,
            ip: "",
            peopleId: 0,
            rxPath: "",
            sname: "",
            status: 0,
            subAccount: "",
            wpath: ""
          });
        }
      },
      changeDb(index) {
        this.people[index].dbs = [];
        if (this.people[index].isDb) {
          this.people[index].dbs.push({
            accountAttr: "",
            auth: "",
            dbName: "",
            deadline: 0,
            id: 0,
            ip: "",
            peopleId: 0,
            sname: "",
            status: 0,
            subAccount: "",
            tableName: ""
          });
        }
      },
      changeHadoop(index) {
        this.people[index].hadoops = [];
        if (this.people[index].isHadoop) {
          this.people[index].hadoops.push({
            cpu: 10,
            deadline: 0,
            hdfs: "100G",
            keytab: "",
            id: 0,
            mem: 40,
            peopleId: 0,
            status: 0,
            subAccount: ""
          });
        }
      },
      changeUap(index) {
        this.people[index].hftps = [];
        if (this.people[index].isHftp) {
          this.people[index].hftps.push({
            deadline: 0,
            id: 0,
            isCluster: false,
            isPerson: false,
            isPro: false,
            peopleId: 0,
            status: 0,
            subAccount: ""
          });
        }
      },
      changePaas(index) {
        this.people[index].paas = [];
        if (this.people[index].isPaas) {
          this.people[index].paas.push({
            deadline: 0,
            id: 0,
            paasType: "",
            peopleId: 0,
            status: 0,
            subAccount: ""
          });
        }
      },
      changeDacp(index) {
        this.people[index].dacps = [];
        if (this.people[index].isDacp) {
          this.people[index].dacps.push({
            dacpAccoutType: "",
            deadline: 0,
            id: 0,
            peopleId: 0,
            status: 0,
            subAccount: ""
          });
        }
      },
      changeElse(index) {
        this.people[index].elseAuthes = [];
        if (this.people[index].isElse) {
          this.people[index].elseAuthes.push({
            deadline: 0,
            des: "",
            id: 0,
            peopleId: 0,
            status: 0,
            subAccount: ""
          });
        }
      },
    },

		props: {
			value: {},
			ifedit: {},
			peopleList: {},
			dutyList: {},
			print: {
				default: false
			}
		}
	}
</script>

<style lang="scss">
	@import "../../../utils/base.scss";

	.myLabel:before {
		content: '*';
		display: inline-block;
		margin-right: 4px;
		line-height: 1;
		font-family: SimSun;
		font-size: 14px;
		color: #ed4014;
	}

	.myInput {
		border: 1px solid #ed4014
	}

	.myForm {
		position: relative;
		line-height: 32px;
		font-size: 14px;
	}
</style>
